import Access from '@/components/Access';
import HandleBtn from '@/components/HandleBar/btn';
import {
  ProFormInstance,
  ProFormRadio,
  ProFormTextArea,
  ProFormTreeSelect,
} from '@/components/Pro';
import type { ActionType, ProColumns } from '@/components/Pro/';
import { ModalForm, ProFormItem, ProFormSelect, ProFormText, ProTable } from '@/components/Pro/';
import { stationControllerUploadExcel as uploadFile } from '@/services/ess/station';
import { sysOrgControllerTree } from '@/services/ess/sysOrg';
import { sysRoleControllerList } from '@/services/ess/sysRole';
import {
  sysUserControllerDelete,
  sysUserControllerEdit,
  sysUserControllerExport,
  sysUserControllerGetUserRealPhone,
  sysUserControllerList,
  sysUserControllerResetPassword,
  sysUserControllerSave,
  sysUserControllerSetStatus,
  sysUserControllerThaw,
} from '@/services/ess/sysUser';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import { downloadFetch } from '@/utils/downloadFile';
import '@umijs/max';
import { useModel } from '@umijs/max';
import {
  message,
  Modal,
  Popover,
  Space,
  Switch,
  theme,
  Typography,
  Upload,
  type UploadProps,
} from 'antd';
import React, { ReactNode, useEffect, useRef, useState } from 'react';
import { useAccess, useIntl } from 'umi';
import Styles from '../index.less';

const { Paragraph } = Typography;

const { useToken } = theme;
/**
 * @en-US Add node
 * @zh-CN 添加节点
 * @param fields
 */
// const handleAdd = async (fields: API.RuleListItem) => {
//   try {
//     await addRule({
//       ...fields,
//     });
//     message.success('Added successfully');
//     return true;
//   } catch (error) {
//     message.error('Adding failed, please try again!');
//     return false;
//   }
// };

const TableList: React.FC = () => {
  const intl = useIntl();
  const access = useAccess();
  const [messageApi, contextHolder] = message.useMessage();
  const { error } = message;
  const formRef = useRef<ProFormInstance>();
  const modalFormRef = useRef<ProFormInstance>();
  const { confirm } = Modal;
  const [modalTitle, setModalTitle] = useState(
    intl.formatMessage({ id: 'systemManagement.requiredFields.addUser ' }),
  );
  const [modalEditFlag, setModalEditFlag] = useState(false);
  const { token } = useToken();
  const [createModalOpen, handleModalOpen] = useState<boolean>(false);
  //const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
  //const [showDetail, setShowDetail] = useState<boolean>(false);
  const { initialState } = useModel('@@initialState') as any;
  let orgList: any[] = [];
  const actionRef = useRef<ActionType>();
  const [currentRow, setCurrentRow] = useState<API.SysUser>();
  const [selectedRowsState, setSelectedRows] = useState<API.SysUser[]>([]);
  const isEnglish = intl.locale === 'en-US';

  const handleLineDel = (record: API.SysUser) => {
    confirm({
      title: intl.formatMessage({ id: 'systemManagement.supplementary.prompt' }),
      content: intl.formatMessage({
        id: 'systemManagement.supplementary.dataCannotBeRestoredAfterDeletion',
      }),
      onOk() {
        //单条删除方法
        sysUserControllerDelete([record.userId]).then((res) => {
          messageApi.open({
            type: 'success',
            content: res.message,
          });
          actionRef?.current?.reloadAndRest?.();
        });
      },
      onCancel() {},
    });
  };

  const columns: ProColumns<API.SysUser>[] = [
    {
      title: intl.formatMessage({ id: 'systemManagement.generalProcedure.SN' }),
      dataIndex: 'pageIndex',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.userManagement.userAccount' }),
      dataIndex: 'userName',
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.userManagement.userFullName' }),
      dataIndex: 'nickName',
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.userManagement.phoneNumber' }),
      dataIndex: 'phone',
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.userManagement.userRole' }),
      dataIndex: 'role',
      render: (_, record) => {
        return (
          <Popover
            content={
              <div>
                {record?.roles?.map((item: any) => (
                  <div key={item.id}>{item.roleName}</div>
                ))}
              </div>
            }
          >
            <div>{record?.roles ? record?.roles[0].roleName : ''}</div>
          </Popover>
        );
      },
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.userManagement.affiliatedOrganization' }),
      dataIndex: 'orgId',
      valueType: 'treeSelect',
      hideInTable: true,
      fieldProps: {
        maxTagTextLength: 2,
        multiple: true,
        fieldNames: {
          label: 'name',
          value: 'id',
          children: 'children',
        },
      },
      request: async () => {
        const res = await sysOrgControllerTree({ orgName: '' });
        return res.data;
      },
      // request:async ()=>{
      //   return await fetchDictInfo()
      // }
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.userManagement.frozenState' }),
      dataIndex: 'freeze',
      width: 100,
      valueEnum: {
        false: {
          text: intl.formatMessage({ id: 'systemManagement.generalProcedure.normal' }),
          status: 'Processing',
        },
        true: {
          text: intl.formatMessage({ id: 'systemManagement.generalProcedure.frozen' }),
          status: 'Default',
        },
      },
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.userManagement.emailAddress' }),
      dataIndex: 'email',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.userManagement.userStatus' }),
      dataIndex: 'status',
      initialValue: '',
      valueType: 'select',
      width: 100,
      request: async () => {
        return [
          { label: intl.formatMessage({ id: 'systemManagement.generalProcedure.all' }), value: '' },
          ...(await fetchDictInfo(DATABASE_TYPE_ENUM.USER_STATUS)),
        ];
      },
      render: (_: ReactNode, record: API.SysTenant) => {
        return [
          <Access perm={'sys:user:setStatus'} key={'setStatus'}>
            <Switch
              checkedChildren={intl.formatMessage({
                id: 'systemManagement.generalProcedure.enable',
              })}
              unCheckedChildren={intl.formatMessage({
                id: 'systemManagement.generalProcedure.disable',
              })}
              checked={record.status === '1'}
              onChange={(checked) => {
                confirm({
                  title: intl.formatMessage({ id: 'systemManagement.supplementary.prompt' }),
                  content: intl.formatMessage({
                    id: 'systemManagement.supplementary.doYouWantToChangeTheEnabledStatusOfThisData',
                  }),
                  onOk: async () => {
                    const res = await sysUserControllerSetStatus({
                      userIds: [record?.userId],
                      action: checked,
                    });
                    if (res?.success) {
                      message.success(
                        `${
                          checked
                            ? intl.formatMessage({ id: 'systemManagement.generalProcedure.enable' })
                            : intl.formatMessage({
                                id: 'systemManagement.generalProcedure.disable',
                              })
                        }${intl.formatMessage({
                          id: 'global.successful',
                        })}`,
                      );
                      actionRef.current?.reloadAndRest?.();
                    }
                  },
                });
              }}
            />
          </Access>,
        ];
      },
    },

    {
      title: intl.formatMessage({ id: 'systemManagement.generalProcedure.operation' }),
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      width: 200,
      render: (_, record) => [
        <Space key="space">
          <Access perm={'sys:user:reset'} key={'reset'}>
            <a
              key="reset"
              onClick={async () => {
                confirm({
                  title: intl.formatMessage({
                    id: 'systemManagement.requiredFields.resetPassword',
                  }),
                  content: intl.formatMessage({
                    id: 'systemManagement.supplementary.confirmPasswordReset',
                  }),
                  onOk() {
                    const { userId } = record;
                    sysUserControllerResetPassword({ userId: userId }).then((res) => {
                      if (res.success) {
                        Modal.info({
                          title: intl.formatMessage({
                            id: 'systemManagement.requiredFields.passwordResetSuccess',
                          }),
                          content: (
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                              {intl.formatMessage({
                                id: 'systemManagement.neddTochange.newPasswordIs',
                              })}
                              <Paragraph copyable style={{ marginBottom: '0', marginLeft: '5px' }}>
                                {res.data}
                              </Paragraph>
                            </div>
                          ),
                        });
                      }
                    });
                  },
                });
              }}
            >
              {intl.formatMessage({ id: 'systemManagement.generalProcedure.resetPassword' })}
            </a>
          </Access>
          <Access perm={'sys:user:view'} key={'config'}>
            <a
              key="config"
              onClick={() => {
                setModalTitle(intl.formatMessage({ id: 'systemManagement.generalProcedure.view' }));
                setModalEditFlag(true);
                handleModalOpen(true);
                setCurrentRow(record);
                sysUserControllerGetUserRealPhone({ userId: record.userId }).then((res) => {
                  if (res.success) {
                    const params = JSON.parse(JSON.stringify(record));

                    params.visibleStationIds = params?.visibleStations
                      ? params?.visibleStations.map((item) => {
                          return item.id;
                        })
                      : [];
                    params.roleIds = params.roles
                      ? params.roles.map((item) => {
                          return item.id;
                        })
                      : undefined;
                    params.phone = res.data;
                    setTimeout(() => {
                      modalFormRef?.current?.setFieldsValue({ ...params });
                    });
                  }
                });
              }}
            >
              {intl.formatMessage({ id: 'systemManagement.generalProcedure.view' })}
            </a>
          </Access>
          {initialState.userId !== record.userId ? (
            <Access perm={'sys:user:edit'} ke={'edit'}>
              <a
                key="edit"
                onClick={() => {
                  setModalTitle(
                    intl.formatMessage({ id: 'systemManagement.generalProcedure.edit' }),
                  );
                  setModalEditFlag(false);
                  handleModalOpen(true);
                  setCurrentRow(record);
                  sysUserControllerGetUserRealPhone({ userId: record.userId }).then((res) => {
                    if (res.success) {
                      const params = JSON.parse(JSON.stringify(record));
                      params.visibleStationIds = params?.visibleStations
                        ? params?.visibleStations.map((item) => {
                            return item.id;
                          })
                        : [];
                      params.roleIds = params.roles
                        ? params.roles.map((item) => {
                            return item.id;
                          })
                        : undefined;
                      params.phone = res.data;
                      setTimeout(() => {
                        modalFormRef?.current?.setFieldsValue({ ...params });
                      });
                    }
                  });
                }}
              >
                {intl.formatMessage({ id: 'systemManagement.generalProcedure.edit' })}
              </a>
            </Access>
          ) : (
            <span></span>
          )}
          {initialState.userId !== record.userId ? (
            <Access perm={'sys:user:del'} key={'delete'}>
              <a
                key="delete"
                style={{ color: token.colorError }}
                onClick={() => {
                  setCurrentRow(record);
                  handleLineDel(record);
                }}
              >
                {intl.formatMessage({ id: 'systemManagement.generalProcedure.delete' })}
              </a>
            </Access>
          ) : (
            <span></span>
          )}
        </Space>,
      ],
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.userManagement.creationtime' }),
      dataIndex: 'createTime',
      valueType: 'dateRange',
      width: 160,
      render: (_, record) => {
        return <span>{record.createTime}</span>;
      },
      search: {
        transform: (value) => {
          return {
            createStartTime: value[0],
            createEndTime: value[1],
          };
        },
      },
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.userManagement.modificationTime' }),
      dataIndex: 'modifyTime',
      valueType: 'dateRange',
      width: 160,
      render: (_, record) => {
        return <span>{record.modifyTime}</span>;
      },
      search: {
        transform: (value) => {
          return {
            modifyStartTime: value[0],
            modifyEndTime: value[1],
          };
        },
      },
    },
  ];

  /**
   * 表单提交
   * @param submitParams
   */
  const handleSubmitSearch = (submitParams: any) => {
    console.log('submitParams', submitParams);
  };
  // 解除冻结
  const handleCancelFreeze = () => {
    confirm({
      title: intl.formatMessage({ id: 'systemManagement.supplementary.prompt' }),
      content: intl.formatMessage({ id: 'systemManagement.neddTochange.cancelFreeze' }),
      onOk() {
        sysUserControllerThaw({ userId: currentRow?.userId }).then((res) => {
          if (res.success) {
            messageApi.open({
              type: 'success',
              content: res.message,
            });
            setCurrentRow({ ...currentRow, freeze: false });
            // handleModalOpen(false);
            actionRef?.current?.reloadAndRest?.();
          }
        });
      },
    });
  };
  const uploadProps: UploadProps = {
    name: 'file',
    multiple: true,
    showUploadList: false,
    customRequest: async (info) => {
      const form = new FormData();
      form.append('file', info.file);
      const res = await uploadFile(form, { ingoreErrorMsg: true });
      if (res?.success) {
        message.success(`${info.file.name} ${intl.formatMessage({ id: 'global.iFileS' })}`);
        actionRef?.current?.reloadAndRest?.();
        return;
      }
      const msg = res?.message;
      message.error(
        `${info.file.name} ${intl.formatMessage({ id: 'global.iFileF' })} ${msg ? ',' + msg : ''}`,
      );
    },
  };
  useEffect(() => {
    initialState.tenants?.forEach((item: any) => {
      orgList.push(...(item.stationInfos ?? []));
    });
  }, []);
  return (
    <div>
      {contextHolder}
      <ProTable<API.SysUser, API.PageParams>
        onSubmit={handleSubmitSearch}
        headerTitle={
          <div className={`${isEnglish ? Styles.table_header_title : ''}`}>
            {intl.formatMessage({ id: 'systemManagement.userManagement.userManagement' })}
          </div>
        }
        actionRef={actionRef}
        formRef={formRef}
        rowKey="pageIndex"
        request={sysUserControllerList}
        toolBarRender={() => [
          <Access perm={'sys:user:add'} key={'add'}>
            <HandleBtn
              handleType="add"
              onClick={() => {
                handleModalOpen(true);
                setModalEditFlag(false);
                setModalTitle(
                  intl.formatMessage({ id: 'systemManagement.userManagement.newUser' }),
                );
                modalFormRef?.current?.resetFields();
              }}
            >
              {intl.formatMessage({ id: 'systemManagement.userManagement.newUser' })}
            </HandleBtn>
          </Access>,
          <Access key="import" accessible={access['sys:station:import']}>
            <Upload {...uploadProps}>
              <HandleBtn handleType="import" onClick={() => {}}>
                {intl.formatMessage({ id: 'systemManagement.generalProcedure.import' })}
              </HandleBtn>
            </Upload>
          </Access>,
          <Access key="export" perm={'sys:user:export'}>
            <HandleBtn
              handleType="export"
              onClick={() => {
                downloadFetch(sysUserControllerExport, formRef?.current?.getFieldsFormatValue());
              }}
            >
              {intl.formatMessage({ id: 'systemManagement.generalProcedure.export' })}
            </HandleBtn>
          </Access>,
          <Access perm={'sys:user:setStatus'} key={'enable'}>
            <HandleBtn
              handleType="enable"
              key="enable"
              onClick={() => {
                if (selectedRowsState.length === 0) {
                  error(intl.formatMessage({ id: 'systemManagement.neddTochange.leastOne' }));
                  return false;
                }
                confirm({
                  title: intl.formatMessage({ id: 'systemManagement.supplementary.prompt' }),
                  content: intl.formatMessage({ id: 'systemManagement.neddTochange.batchEnable' }),
                  onOk() {
                    const ids = selectedRowsState.map((item) => {
                      return item?.userId;
                    });
                    sysUserControllerSetStatus({
                      userIds: ids,
                      action: true,
                    }).then((res) => {
                      if (res.success) {
                        messageApi.open({
                          type: 'success',
                          content: res.message,
                        });
                        actionRef?.current?.reloadAndRest?.();
                      }
                    });
                  },
                });
              }}
            >
              {intl.formatMessage({ id: 'systemManagement.generalProcedure.batchEnable' })}
            </HandleBtn>
          </Access>,
          <Access perm={'sys:user:setStatus'} key={'disabled'}>
            <HandleBtn
              handleType="disabled"
              key="disabled"
              onClick={() => {
                if (selectedRowsState.length === 0) {
                  error(intl.formatMessage({ id: 'systemManagement.neddTochange.leastOne' }));
                  return false;
                }
                confirm({
                  title: intl.formatMessage({ id: 'systemManagement.supplementary.prompt' }),
                  content: intl.formatMessage({ id: 'systemManagement.neddTochange.batchEnable' }),
                  onOk() {
                    const ids = selectedRowsState.map((item) => {
                      return item?.userId;
                    });
                    sysUserControllerSetStatus({
                      userIds: ids,
                      action: false,
                    }).then((res) => {
                      if (res.success) {
                        messageApi.open({
                          type: 'success',
                          content: res.message,
                        });
                        actionRef?.current?.reloadAndRest?.();
                      }
                    });
                  },
                });
              }}
            >
              {intl.formatMessage({ id: 'systemManagement.generalProcedure.batchDisable' })}
            </HandleBtn>
          </Access>,
          <Access perm={'sys:user:del'} key={'delete'}>
            <HandleBtn
              onClick={async () => {
                if (selectedRowsState.length === 0) {
                  error(intl.formatMessage({ id: 'systemManagement.neddTochange.leastOne' }));
                  return false;
                }
                if (selectedRowsState.some((item) => item.userId === initialState?.userId)) {
                  error(intl.formatMessage({ id: 'systemManagement.neddTochange.adminDisable' }));
                  return false;
                }
                confirm({
                  title: intl.formatMessage({ id: 'systemManagement.supplementary.prompt' }),
                  content: intl.formatMessage({ id: 'systemManagement.neddTochange.batchDelete' }),
                  onOk() {
                    const ids = selectedRowsState.map((item) => {
                      return item?.userId;
                    });
                    sysUserControllerDelete(ids).then((res) => {
                      if (res.success) {
                        messageApi.open({
                          type: 'success',
                          content: res.message,
                        });
                        setSelectedRows([]);
                        actionRef?.current?.reloadAndRest?.();
                      }
                    });
                  },
                });
              }}
              handleType="delete"
            >
              {intl.formatMessage({ id: 'systemManagement.generalProcedure.batchDelete' })}
            </HandleBtn>
          </Access>,
        ]}
        columns={columns}
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
      />
      <ModalForm
        modalProps={{
          destroyOnClose: true,
        }}
        defaultValue={currentRow}
        formRef={modalFormRef}
        title={modalTitle}
        width="750px"
        colProps={{ md: 12 }}
        open={createModalOpen}
        disabled={modalEditFlag}
        onOpenChange={handleModalOpen}
        submitter={!modalEditFlag}
        onFinish={async (value) => {
          if (
            modalTitle !== intl.formatMessage({ id: 'systemManagement.requiredFields.addUser' })
          ) {
            value.userId = currentRow?.userId;
            const res = await sysUserControllerEdit(value);
            if (res.success) {
              message.success(intl.formatMessage({ id: 'global.editedDuccessfully!' }));
              handleModalOpen(false);
              actionRef?.current?.reloadAndRest?.();
            }
          } else {
            const res = await sysUserControllerSave(value);
            if (res.success) {
              message.success(intl.formatMessage({ id: 'global.addSuccessfully' }));
              handleModalOpen(false);
              actionRef?.current?.reloadAndRest?.();
            }
          }
        }}
      >
        <ProFormText
          name="userName"
          label={intl.formatMessage({ id: 'systemManagement.userManagement.userAccount' })}
          fieldProps={{
            maxLength: 15,
          }}
          rules={[
            {
              required: true,
              message: intl.formatMessage({ id: 'systemManagement.requiredFields.userAccount' }),
            },
            {
              pattern: new RegExp(/^[^\u4e00-\u9fa5]+$/, 'g'),
              message: intl.formatMessage({
                id: 'systemManagement.requiredFields.noChineseCharacters',
              }),
            },
          ]}
        />
        <ProFormText
          name="nickName"
          label={intl.formatMessage({ id: 'systemManagement.userManagement.userFullName' })}
          fieldProps={{
            maxLength: 30,
          }}
          rules={[
            {
              required: true,
              message: intl.formatMessage({ id: 'systemManagement.requiredFields.userName' }),
            },
          ]}
        />
        <ProFormText
          name="phone"
          label={intl.formatMessage({ id: 'systemManagement.userManagement.phoneNumber' })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({ id: 'systemManagement.requiredFields.phoneNumber' }),
            },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: intl.formatMessage({
                id: 'systemManagement.requiredFields.validMobileNumber',
              }),
            },
          ]}
        />
        <ProFormTreeSelect
          name="orgId"
          label={intl.formatMessage({
            id: 'systemManagement.userManagement.affiliatedOrganization',
          })}
          fieldProps={{
            fieldNames: {
              label: 'name',
              value: 'id',
              children: 'children',
            },
          }}
          request={async () => {
            const res = await sysOrgControllerTree({ orgName: '' });
            return res.data;
          }}
          rules={[
            {
              required: true,
              message: intl.formatMessage({ id: 'systemManagement.requiredFields.organization' }),
            },
          ]}
        />
        <ProFormSelect
          name="visibleStationIds"
          label={intl.formatMessage({ id: 'systemManagement.userManagement.plantPermissions' })}
          rules={[
            {
              required: true,
              message: intl.formatMessage({ id: 'systemManagement.neddTochange.siteRequired' }),
            },
          ]}
          fieldProps={{
            mode: 'multiple',
            maxTagCount: 1,
            fieldNames: {
              label: 'stationName',
              value: 'id',
            },
          }}
          request={async () => {
            const tempArray: any[] = [];
            initialState.tenants.forEach((item: any) => {
              tempArray.push(...item.stationInfos);
            });
            return tempArray;
          }}
        />
        <ProFormSelect
          name="roleIds"
          request={async () => {
            const res = await sysRoleControllerList({ search: { roleName: '' }, page: {} });
            return res.data.records;
          }}
          label={intl.formatMessage({ id: 'systemManagement.userManagement.userRole' })}
          fieldProps={{
            fieldNames: {
              label: 'roleName',
              value: 'id',
            },
            maxTagCount: 1,
          }}
          mode="multiple"
          rules={[
            {
              required: true,
              message: intl.formatMessage({ id: 'systemManagement.requiredFields.userRole' }),
            },
          ]}
        />
        <ProFormRadio.Group
          colProps={{
            md:
              modalTitle === intl.formatMessage({ id: 'systemManagement.requiredFields.addUser' })
                ? 24
                : 12,
          }}
          label={intl.formatMessage({ id: 'systemManagement.userManagement.userStatus' })}
          name="status"
          initialValue={'1'}
          options={[
            {
              label: intl.formatMessage({ id: 'systemManagement.generalProcedure.enable' }),
              value: '1',
            },
            {
              label: intl.formatMessage({ id: 'systemManagement.generalProcedure.disable' }),
              value: '0',
            },
          ]}
        />
        {modalTitle !== intl.formatMessage({ id: 'systemManagement.requiredFields.addUser' }) && (
          <ProFormItem
            label={intl.formatMessage({ id: 'systemManagement.userManagement.frozenState' })}
            name="freezeStatus"
          >
            <Space style={{ width: '120px' }}>
              <span>
                {currentRow?.freeze
                  ? intl.formatMessage({ id: 'systemManagement.generalProcedure.frozen' })
                  : intl.formatMessage({ id: 'systemManagement.generalProcedure.normal' })}
              </span>
              {currentRow?.freeze ? (
                <a onClick={handleCancelFreeze}>
                  {intl.formatMessage({ id: 'systemManagement.generalProcedure.unfreeze' })}
                </a>
              ) : null}
            </Space>
          </ProFormItem>
        )}
        <ProFormText
          name="email"
          label={intl.formatMessage({ id: 'systemManagement.userManagement.emailAddress' })}
          placeholder={intl.formatMessage({ id: 'siteManage.enterPlease' })}
          fieldProps={{
            maxLength: 50,
          }}
          rules={[
            {
              type: 'email',
              message: intl.formatMessage({ id: 'systemManagement.requiredFields.emailFormat' }),
            },
          ]}
        />
        <ProFormTextArea
          colProps={{ md: '24' }}
          label={intl.formatMessage({ id: 'systemManagement.userManagement.remarksDescription' })}
          name="remark"
          fieldProps={{
            placeholder: intl.formatMessage({
              id: 'systemManagement.tenantManagementMenu.noMoreThan140Words',
            }),
            maxLength: 140,
          }}
        />
      </ModalForm>
    </div>
  );
};
export default TableList;
